/**
 * 自定义代码高亮指令
 */
import hljs from 'highlight.js'
import 'highlight.js/styles/vs.css'
//import 'highlight.js/styles/googlecode.css' // 样式文件

const Highlight = {
  deep: true,
  bind(el, binding) {
    // on first bind, highlight all targets
    let targets = el.querySelectorAll('code')

    targets.forEach(target => {
      if (typeof binding.value === 'string') {
        // if a value is directly assigned to the directive, use this
        // instead of the element content.
        target.textContent = binding.value
      }
      hljs.highlightBlock(target)
    })
  },
  componentUpdated(el, binding) {
    // after an update, re-fill the content and then highlight
    let targets = el.querySelectorAll('code')

    targets.forEach(target => {
      if (typeof binding.value === 'string') {
        // if a value is directly assigned to the directive, use this
        // instead of the element content.
        target.textContent = binding.value
        hljs.highlightBlock(target)
      }
    })
  }
}

const install = function (Vue) {
  Vue.directive('highlight', Highlight)
}

if (window.Vue) {
  window['highlight'] = Highlight
  Vue.use(install) // eslint-disable-line
}

//export default install

Highlight.install = install
export default Highlight
